@Entry
@Component
struct Work {
  @State message: string = 'Hello World';

  build() {
    Column(){
      Image('pages/img/logo.png')
        .width('30%')
        .margin({top:50})
      Text('登录界面')
        .fontSize(25)
        .fontWeight(FontWeight.Bold)
        .margin({top:10})
      Text('登录账号以使用更多服务')
        .fontSize(15)
        .opacity(.5)
        .margin({top:10})
      TextInput({ placeholder: '请输入账号' })
        .backgroundColor('#F2F3F5')
      Divider()
        .strokeWidth(1)
        .color('#CCCCCC')
        .width(330)
      TextInput({ placeholder: '请输入密码' })
        .type(InputType.Password)
        .backgroundColor('#F2F3F5')
        .margin({top:20})
      Divider()
        .strokeWidth(1)
        .color('#CCCCCC')
        .width(330)
      Row(){
        Text('短信验证码登录')
          .fontColor('#007FFF')

        Text('忘记密码')
          .fontColor('#007FFF')

      }
      .margin({top:10})
      .width(330)
      .justifyContent(FlexAlign.SpaceBetween)
      Text('登录')
        .width('30%')
        .height(40)
        .fontColor('white')
        .margin({top:70})
        .backgroundColor('#007FFF')
        .textAlign(TextAlign.Center)
        .borderRadius({
          topLeft: 30,
          topRight: 30,
          bottomLeft: 30,
          bottomRight: 30
        })
      Text('注册账号')
        .fontColor('#007FFF')
        .margin({top:15})
      Image('pages/img/logo2.png')
        .width(30)
        .margin({top:40})
      Text('其他方式登录')
        .fontSize(10)
        .opacity(.5)
        .margin({top:30})
      Row(){
        Text('方式一')
          .fontSize(10)
          .width(50)
          .height(50)
          .textAlign(TextAlign.Center)
          .border({
            width: 1,
            style: BorderStyle.Solid,
            color: Color.Gray
          })
          .borderRadius(50)
        Text('方式二')
          .fontSize(10)
          .width(50)
          .height(50)
          .textAlign(TextAlign.Center)
          .border({
            width: 1,
            style: BorderStyle.Solid,
            color: Color.Gray
          })
          .borderRadius(50)
        Text('方式三')
          .fontSize(10)
          .width(50)
          .height(50)
          .textAlign(TextAlign.Center)
          .border({
            width: 1,
            style: BorderStyle.Solid,
            color: Color.Gray
          })
          .borderRadius(50)
      }
      .width(330)
      .margin({top:40})
      .justifyContent(FlexAlign.SpaceAround)
    }

    .backgroundColor('#F2F3F5')
    .height('100%')
    .width('100%')
  }
}